<template>
  <div>
    <Header :left="true" leftText="返回" title="维修任务列表——抢修" />
    <div>
      <van-row style="margin-top: 80px">
        <van-col><van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" /></van-col>
        <van-col class="message">任务清单</van-col>
        <van-icon right name="enlarge" size="1.5em" @click="showScanner"
          style="margin-top: 2px; float: right; margin-right: 2px"></van-icon>
      </van-row>
    </div>
    <div class="textScroll">
      <!-- 循环数据开始 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in itemsOne" :key="item.id">
          <div style="width: 100%; background-color: #f3f4f8; height: 5px">
            <span></span>
          </div>
          <div class="divStyle" @click="showDetail(item)">
            <!-- <van-row style="margin-top:10px;">
              <van-col span="15" style="margin-left:5px;font-weight:bold;font-size:15px;color:#A9A9A9;"
                >报修编号：{{ item.repairCode }}</van-col
              >
            </van-row>
            <van-row style="margin-top:10px;">
              <van-col span="24" style="margin-left:5px;color:#A9A9A9;font-size:15px;"
                >报修时间：<van-icon name="assets/time.png" /> {{ item.requestTime }}</van-col
              >
            </van-row> -->

            <!-- <van-divider style="margin-top:10px;" /> -->
            <van-row style="margin-top: 10px; font-size: 18px">
              <van-col span="18" style="color: #a9a9a9; margin-left: 5px">设备编码：{{ item.equipName }}</van-col>
              <van-col span="18" style="color: #a9a9a9; margin-top: 10px; margin-left: 5px">设备名称：{{ item.equipDesc
              }}</van-col>
              <van-col span="15" style="
                  color: #a9a9a9;
                  margin-top: 10px;
                  margin-left: 5px;
                  font-size: 18px;
                ">报修人：{{ item.requestUser }}</van-col>
              <van-col span="8">
                <div class="labelStyle">
                  {{ statusList[item.status] }}
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>

      <!-- 循环数据结束 -->
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  List,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
import { memory } from "@/libs/utils";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(List);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";

export default {
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
  },

  data() {
    return {
      //动态加载数据
      loading: false,
      finished: false,
      user: [], //登录用户信息
      //下拉刷新动态
      loadParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      currentEquipName: "",
      allSelected: false,
      selectFont: "一键勾选",
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: "",
      itemsOne: [],
      statusList: {
        0: "待维修",
        1: "维修中",
        2: "维修暂停",
        3: "维修完成",
        4: "审核不通过",
        5: "关闭",
      }, //状态数组
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get("user"));
    api.requestPermission(
      {
        list: ["camera", "microphone", "storage"],
      },
      function (ret, err) { }
    );

    // try {
    //   var manageStorage = api.require('manageStorage');
    //   manageStorage.requestAllFilePermission({
    //   }, function (ret) {
    //     // api.alert({
    //     //   msg: JSON.stringify(ret)
    //     // })
    //   });
    // } catch {

    // }
    
    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }

    //alert("手机系统"+api.deviceName.toLowerCase());
    //如果当前界面没有设备编码，打开扫描界面
    if (this.currentEquipName == "") {
      this.showScanner();
    }
  },
  methods: {
    //任务列表动态加载
    onLoad() {
      //页数+1
      this.loadParams.pageNum = this.loadParams.pageNum + 1;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.queryWaitRepairList();
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.itemsOne.length >= this.loadParams.total) {
          this.finished = true;
        }
      }, 3000);
    },

    //详情展示
    showDetail(item) {
      let _this = this;
      //alert(JSON.stringify(item));
      api.openWin({
        name: "repair",
        url: "./maintain-toRepair-repair.html",
        type: "fade",
        pageParam: {
          equip: item,
          winName: api.winName,
        },
      });
      api.addEventListener(
        {
          name: "result",
        },
        function (ret, err) {
          if (ret.value.item.length != 0) {
            for (let i = 0; i < _this.itemsOne.length; i++) {
              if (_this.itemsOne[i].id == ret.value.item.id) {
                _this.itemsOne.splice(i, 1);
              }
            }
          }
        }
      );
    },

    //初始化查询待维修列表信息
    queryWaitRepairList() {
      let _this = this;
      _this.finished = false;
      if (_this.currentEquipName == "") {
        return;
      }

      if (_this.user == "" || _this.user == undefined) {
        Dialog.alert({
          theme: "round-button",
          message: "获取当前登录用户失败，请重新登录系统",
        }).then(() => {
          // on close
        });
        return;
      }
      api.ajax(
        {
          url:
            _httpClient.getApiPrefix() +
            "/app/repair/repairInfo/wiatExecutelistsj?pageNum=" +
            _this.loadParams.pageNum +
            "&pageSize=" +
            _this.loadParams.pageSize,
          //如果地址访问不到会请求出错，请填写自己的接口地址
          method: "post",
          cache: "false",
          timeout: 30,
          dataTpye: "json",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            Authorization: "Bearer " + getToken(),
          },
          data: {
            body: {
              userName: _this.user.userName,
              equipName: _this.currentEquipName,
            },
          },
        },
        function (res, err) {
          if (res.code === 200) {
            if (!_this.finished) {
              for (let i = 0; i < res.rows.length; i++) {
                _this.itemsOne.push(res.rows[i]);
              }

              _this.loadParams.total = res.total;
              //判断是否已加载完成
              if (_this.itemsOne.length >= _this.loadParams.total) {
                _this.finished = true;
              }
            }
          } else {
            Toast.clear();
            Dialog.alert({
              theme: "round-button",
              message: res.msg,
            }).then(() => { });
          }
        }
      );
    },

    //打开扫描
    showScanner() {
      let _this = this;
      _this.itemsOne = [];
      if (
        api.deviceName.toLowerCase() == "huawei" ||
        api.deviceName.toLowerCase() == "honor"
      ) {



        var zyHmsScan = api.require('zyHmsScan');
        var param = {
          //returnAll:true
        };
        zyHmsScan.openDefaultView(param, function (ret) {
          // _this.addBarCode(ret.result);
          _this.currentEquipName = ret.result;
          _this.queryWaitRepairList();
          //api.alert({ msg: JSON.stringify(ret) });
        });
        // var QRScan = api.require("QRScan");
        // QRScan.customizedScanner(
        //   {
        //     rect: {
        //       x: 15, //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       y: 0, //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       w: 320, //（可选项）数字类型；模块的宽度；支持设置'auto'；默认：所属的 Window 或 Frame 的宽度
        //       h: 480, //（可选项）数字类型；模块的高度；支持设置'auto'；默认：所属的 Window 或 Frame 的高度
        //     },
        //     rectOfInterest: {
        //       x: 64, //（可选项）数字类型；扫码识别区域左上角的 x 坐标（相对于扫码区rect）；默认：0
        //       y: 65, //（可选项）数字类型；扫码识别区域左上角的 y 坐标（相对于扫码区rect）；默认：0
        //       w: 250, //（可选项）数字类型；扫码识别区域的宽度；默认：扫码区rect的宽度
        //       h: 250, //（可选项）数字类型；扫码识别区域的高度；默认：扫码区rect的高度
        //     },
        //     //tipString:'放入框内扫码',
        //     maskColor: "rgba(0,0,0,0.5)",
        //     scanLine: {
        //       color: "#00FF00",
        //       thickness: 2,
        //     },
        //     marginB: 30,
        //     formatType: "ALL",
        //   },
        //   function (ret) {
        //     if (ret) {
        //         let res = ret.result.split(",");
        //         _this.currentEquipName = ret.result;
        //         _this.queryWaitRepairList();
        //     }
        //   }
        // );
        //   QRScan.closeCustomizedScanner();
      } else {
        var FNScanner = _this.$ac.require("FNScanner");
        FNScanner.openScanner(
          {
            autorotation: true,
          },
          function (ret, err) {
            if (ret) {
              if (ret.eventType == "success" && ret.content != "") {
                let res = ret.content.split(",");
                _this.currentEquipName = ret.content;
                _this.queryWaitRepairList();
              }
            } else {
              alert(JSON.stringify(err));
            }
          }
        );
      }
    },
  },
};
</script>
<style>
html,
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.buttonLeft {
  position: fixed;
  margin-top: -40px;
  right: 100px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  /* border: solid #dcdcdc; */
  border-top-width: 3px;
  border-right-width: 0px;
  border-left-width: 0px;
  margin-left: 5px;
  margin-right: 4px;
  font-size: 15px;
  height: 110px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 7rem;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0rem;
  z-index: 1;
}

.labelStyle {
  width: 70px;
  height: 20px;
  background-color: #ff9933;
  color: white;
  float: right;
  font-size: 13px;
  text-align: center;
  margin-top: -5px;
  line-height: 20px;
}
</style>
